<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/order-details_1.css" />
</head>
<style type="text/css">

    /*input::input-placeholder {
		color: rgba(149, 149, 149, 1);
		font-weight: inherit;
		font-size: 12px;
    }*/



</style>
<body>

    <div class="mui-content">
        <!--用户信息-->
        <div class="user_msg">
            <div>
                <div id="userInfo_username">张先生</div>
                <div id="userInfo_usernumber">187****8006</div>
            </div>
            <div class="mui-input-group car-inf-2" style="display: flex; padding-right:15px;">
                <!--<img src="../image/icon/san@2x.png" />
                <!-- 车牌 -->
                <!--<select name="license_name" class="sel input-sub" style="font-size: 14px;" id="license_content">

					</select>
                <input type="text" style="text-transform:uppercase;" class="mui-input-clear input-sub" id="car_Number" name="car_license" placeholder="车牌号" value="A12345">-->
                <div class="mui-input-row license">
					<img src="../image/icon/san@2x.png" />
					<!-- 车牌 -->
					<select name="license_name" class="sel input-sub" style="font-size: 14px;width: 70px;" id="license_content">

					</select>
					<input type="text" style="text-transform:uppercase; margin-top: -3px;"  class="mui-input-clear input-sub" id="car_Number" name="car_license"  placeholder="车牌号">
				</div>
				<div class="mui-input-row" style="flex: 5; margin-left:10px; font-size: 14px;">
					<label>位置</label>
					<input type="text" class="input-sub" style="margin-top: -3px;" name="car_park" id="parkPlace"  placeholder="请输入车辆停放位置">
				</div>
            </div>
            <div class="manpu" style="padding-left:0;">
				<div></div>
			</div>
        </div>
        <!--车型-->
        <div class="car-type">
            <div>选择车型</div>
            <div id="motorcycle_1">
                <!-- <div class="carBtn">
                    <div><img src="../image/icon/ddxiaojc@2x.png" alt="" /></div>
                    <div><span><img class="carbtn-img" src="../image/icon/GX1@2x.png" alt="" /></span>小轿车</div>
                </div>
                <div class="carBtn">
                    <div><img src="../image/icon/ddSUV@2x.png" alt="" /></div>
                    <div><span><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></span>SUV、七座型</div>
                </div> -->
            </div>
        </div>
        <!--选择服务-->


        <div class="service">
            <div>选择服务</div>
            <div id="service_btn">
                <!--<div>
                    <button>普 洗</button>
                </div>
                <div>
                    <button>普 洗</button>
                </div>
                <div>
                    <button id="btn_j" class="out">精 洗</button>
                </div>-->
            </div>
            <!--服务流程/时长：约20~30分钟-->
            <div></div>
        </div>
        <!--服务方式-->
        <div class="mode">
            <div class="mode-list">
                <div>服务方式</div>
                <div>
                    <span class="mui-input-group">
								<div class="mui-input-row">
									<a>
										<span class="mui-badge1">
											<select class="mui-h5" id="mui-select">
												<option value="0">智能存取</option>
												<!-- <option value="1" style="display:none">预约下单</option> -->
												<option value="2">自行到店</option>
											</select>
										</span>
                    </a>
                </div>
                </span>
                <!--<span id="c-btn"></span>-->
                <img id="m-img" src="../image/icon/ARROWRIGHTk5@2x.png" alt="" />
            </div>
        </div>
        <!--智能存取-内容填充部分-->
        <div class="con" id="conZhi">

            <!--<div >-->
            <!--<div class="con-left">

                    <div class="con-left-top">
                        <div>
                            <div><img src="../image/icon/yjdh@2x.png" alt="" /></div>
                        </div>
                        <div>
                            <div>离我最近：<span>钥匙柜 QXWD-01</span></div>
                            <div>0.28km |<img src="../image/icon/dingw@2x.png" alt="" />万达银座负二楼电梯口</div>
                        </div>
                    </div>
                    <div class="con-left-bottom">
                        <span>当前钥匙柜有12空位</span>
                    </div>
                </div>
                <div class="con-right">
                    <div><img src="../image/icon/ysg1@2x.png" alt="" /></div>

                </div>-->
            <!--</div>-->

        </div>
        <!--预约下单-内容填充部分-->

        <div class="con" id="conYu" >
            <!-- <div>
                <div class="con-left">
                    <div class="con-left-top">
                        <div>
                            <div><img src="../image/icon/yjdh@2x.png" alt="" /></div>
                        </div>
                        <div>
                            <div><span>离我最近：</span>万达金座停车场负二楼门店</div>
                            <div>0.58km |<img src="../image/icon/dingw@2x.png" alt="" />青秀区-东葛路116号</div>
                        </div>
                    </div>
                    <div class="con-left-bottom">
                        <span>1人正在排队</span>
                    </div>
                </div>
                <div class="con-right">
                    <div><img src="../image/icon/mendian@2x.png" alt="" /></div>
                </div>
            </div> -->
        </div>
        <!--自行到店-内容填充部分-->
        <div class="con" id="conZi">
                <!-- <div class="con-left">
                    <div class="con-left-top">
                        <div>
                            <div><img src="../image/icon/yjdh@2x.png" alt="" /></div>
                        </div>
                        <div>
                            <div><span>离我最近：</span>万达银座负二楼停车场车车侠充电点</div>
                            <div>0.58km |<img src="../image/icon/dingw@2x.png" alt="" />青秀区-东葛路116号</div>
                        </div>
                    </div>
                    <div class="con-left-bottom-1">
                        <span>2018-12-28<span><img src="../image/icon/sanjx1@2x.png" alt="" /></span></span>
                        <span>空闲3<span>/共5个</span></span>
                    </div>
                </div>
                <div class="con-right">
                    <div><img src="../image/icon/mendian@2x.png" alt="" /></div>
                </div> -->



        </div>
    </div>
    <!--优惠券-->
    <div class="mode modecop" id="modecop">
        <div class="mode-list mode-list-1">
            <div>优惠券</div>
            <div onclick="get_discount()">
                <!-- <div id="Discount_number_none" style="display:none">
                <span>无可用的优惠券</span>
              </div> -->
                <div id="discount">
                    <span>-￥</span>
                    <span id="Discount_number" style="display:block">0</span>
                </div>
                <img src="../image/icon/ARROWRIGHT@2x.png" alt="" />
            </div>
        </div>
    </div>
    <!--支付方式-->
    <div class="mode modecop" id="modecop">
        <div class="mode-list mode-list-1">
            <div>支付方式</div>
            <div>
                <span>在线支付</span>
                <img src="../image/icon/ARROWRIGHT@2x.png" alt="" />
            </div>
        </div>
    </div>
    <!--提示  现在下单预计20:00分完成服务-->
    <div class="tips"></div>
    <!--底部合计支付部分-->
    <div class="total" id="total">
        <div class="total-left" id="total_left">
            <div>合计:￥<span id="price">0.00</span></div>
        </div>
        <div class="total-right" tapmode onclick="placeOrder()">
            <div>提交订单</div>
        </div>
    </div>
    </div>
</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script src="../script/template-web.js"></script>
<!--用户信息数据模型-->
<!--<script type="text/html" id="userMsg">
    <div>
        <div>{{Nickname}}</div>
        <div>{{cerificationCode}}</div>
    </div>
</script>-->
<!-- 车牌数据模型 -->
<script type="text/html" id="license">
    {{each car_list as val i}}
    <option value="{{val}}">{{val}}</option>
    {{/each}}
</script>
<!-- 选择车型 -->
<script type="text/html" id="motorcycle_2">
    {{each data as val i}} {{if val.id=="1"}}
    <div class="carBtn" onclick="checkCar({{i}})">
        <div class="icon_img">
            <img src="{{val.icon}}" alt="" /></div>
        <div><span><img class="carbtn-img" src="../image/icon/GX1@2x.png" alt="" /></span>{{val.name}}</div>
    </div>
    {{ else if val.id=="2"}}
    <div class="carBtn" onclick="checkCar({{i}}) ">
        <div class="icon_img">
            <img src="{{val.icon}}" alt="" /></div>
        <div><span><img class="carbtn-img" src="../image/icon/WGX1@2x.png" alt="" /></span>{{val.name}}</div>
    </div>
    {{/if}} {{/each}}
</script>

<!--选择服务数据模型-->
<script type="text/html" id="serviceBtn">
    {{each data as val i}}
    <div>
        <button class="out" id={{val.id}} tapmode onclick="checkType({{i}},{{val.shop_price}})">{{val.name}}</button>
    </div>
    {{/each}}
</script>

<!-- 获取钥匙柜列表 -->
<script type="text/html" id="KeyCabinet2">
    {{each data as val i}} {{if i==0}}
    <div onclick="tokey_list({{val.shop_id}})">
        <div class="con-left" id={{val.id}}>
            <div class="con-left-top">
                <div>
                    <div><img src="../image/icon/yjdh@2x.png" alt="" /></div>
                </div>
                <div>
                    <div>离我最近：<span id="imei_btn">钥匙柜{{val.imei}}</span></div>
                    <div>0.28km |<img src="../image/icon/dingw@2x.png" alt="" />{{val.area}}{{val.addr}}</div>
                </div>
            </div>
            <div class="con-left-bottom">
                <span>当前钥匙柜有{{val.val_nums}}空位</span>
            </div>
        </div>
        <div class="con-right">
            <div><img src="../image/icon/ysg1@2x.png" alt="" /></div>
        </div>
    </div>
    {{/if}} {{/each}}
</script>

<!--附近店铺列表数据模型-->
<script type="text/html" id="NearbyStore">
    {{each data as val i}} {{if i==0}}

    <div onclick="tokey_list({{val.shop_id}})">
        <div class="con-left" id={{val.id}}>
            <div class="con-left-top">
                <div>
                    <div><img src="../image/icon/yjdh@2x.png" alt="" /></div>
                </div>
                <div>
                    <div><span>离我最近：</span>{{val.shop_name}}</div>
                    <div>0.58km |<img src="../image/icon/dingw@2x.png" alt="" />{{val.address}}</div>
                </div>
            </div>
            <div class="con-left-bottom">
                <span>1人正在排队</span>
            </div>
        </div>
        <div class="con-right">
            <div><img src="../image/icon/mendian@2x.png" alt="" /></div>
        </div>
    </div>
    {{/if}} {{/each}}
</script>

<script type="text/javascript">
    apiready = function() {
        init();
        // fnDefaultCar();
        // 获取车型
        fnMotorcycleType();
        // 获取钥匙柜
        fnKeyCabinet();
        // 获取服务id
        // get_serverId() ;
        // 获取个人信息
        Get_userInfo()
        console.log(api.pageParam.pid);
    };
    headInner({
            title: "订单详情",
            //headleft
            headl: '<a  style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
            //headright
            headr: '<div class="tu_2" tapmode onclick="Being()"><img src="../image/icon/xx-bs@2x.png" alt="" /></div>',
            color: "", //默认是蓝色
            padding: "0px 0px 0px",
        })
        // 车型ID 服务项目ID 下单方式ID 钥匙柜或者门店id,优惠券ID,总计,优惠券金额
    var typeId, projectId, service_Type = "key",
        area, couponId = 0,
        total, Discount_price;
    // 订单号ID,订单号,下单时间,服务项目,
    var Ser_orderId, Ser_order_sn, Ser_updated_at, Ser_desc;
    // 获取全局个人信息
    function Get_userInfo() {
        var userInfo = $api.getStorage("UserBase");
        console.log(JSON.stringify(userInfo));
        userInfo.mobile = userInfo.mobile.substr(0, 3) + "****" + userInfo.mobile.substr(7, 4)
        $api.byId('userInfo_usernumber').innerHTML = userInfo.mobile;
        $api.byId('userInfo_username').innerHTML = userInfo.nickname;
    }


    //获取车型
    function fnMotorcycleType() {
        BASE.MYajax({
            'pathName': 'home/getCarType',
            'method': ofVehicleType //调用函数
        });
    }

    function ofVehicleType(ret, err) {
        if (ret.code == 200) {
            var html = template('motorcycle_2', ret);
            document.getElementById('motorcycle_1').innerHTML = html;
            // 默认服务
            Getdefault_ser();
        }
    }
    // 默认选择车型服务项目
    function Getdefault_ser() {
        var check_img = $api.domAll($api.byId('motorcycle_1'), ".carbtn-img");
        for (var i = 0; i < check_img.length; i++) {
            if (check_img[i].getAttribute('src').indexOf('../image/icon/WGX1@2x.png') > -1) {
                fnServiceBtn(i, api.pageParam.pid)
            }
        }
    }
    //根据车型获取选择服务
    function fnServiceBtn(serviceType, ser_pid) {
        console.log(serviceType);
        console.log(ser_pid);
        typeId = serviceType;
        BASE.MYajax({
            'pathName': 'userCar/projects',
            // 'methods': 'get',
            'ajaxData': {
                values: {
                    type_id: serviceType,
                    pid: ser_pid
                }
            },
            'method': realData //调用函数
        });
    }
    function realData(ret, err) {
        // alert(ret);
        console.log("洗车洗车啦" + JSON.stringify(ret));
        if (ret.code == 200) {
            var html = template('serviceBtn', ret);
            document.getElementById('service_btn').innerHTML = html;
        } else {
            reToast(ret, err)
        }
    }

    //获取钥匙柜
    function fnKeyCabinet() {
        // console.log("获取钥匙柜");
        BASE.MYajax({
            'pathName': 'keycabinet/index',
            'method': KeyCabinet //调用函数
        });
    }
    function KeyCabinet(ret, err) {
        if (ret.code == 200) {
            // console.log("获取钥匙柜111" + JSON.stringify(ret));
            var html = template('KeyCabinet2', ret);
            document.getElementById('conZhi').innerHTML = html;
        } else {
            reToast(ret, err)
        }
    }


    //获取附近门店
    function Shop() {
        BASE.MYajax({
            'pathName': 'home/getShops',
            'method': shopData //调用函数
        });
    }

    function shopData(ret, err) {
        if (ret.code == 200) {
            console.log("111" + JSON.stringify(ret));
            var shophtml = template('NearbyStore', ret);
            document.getElementById('conZi').innerHTML = shophtml;
        } else {
            reToast(ret, err)
        }
    }

    // 更新列表
    function fnGetCallBackData() {
        console.log(132123123412);
        var item_infor = $api.getStorage('item_infor');
        var Obj = {};
        Obj.data = [];
        Obj.data.push(item_infor);
        console.log(JSON.stringify(item_infor));
        console.log(JSON.stringify(Obj));
        if (item_infor.ser_type == 1) {
            // 更新钥匙柜列表
            var html = template('KeyCabinet2', Obj);
            document.getElementById('conZhi').innerHTML = html;
        } else if (item_infor.ser_type == 2) {
            // 更新门店列表
            var shophtml = template('NearbyStore', Obj);
            document.getElementById('conZi').innerHTML = shophtml;
        }
    }

    // 选择优惠券
    function get_discount() {
        api.openWin({
            name: 'Coupon',
            url: '../html/Coupon.html',
            pageParam: {
                ProjectId: projectId
            }
        });
    }

    //  使用优惠券
    function use_discount() {
        console.log("远程调用成功");
        var discountItem = $api.getStorage('Discount_infor');
        console.log(JSON.stringify(discountItem));
        couponId = discountItem.id;
        if (discountItem.money == 0) {
            // 洗车券(免费)
            $api.byId('Discount_number').innerHTML = 0;
        } else {
            // 代金券
            $api.byId('Discount_number').innerHTML = discountItem.money;
            total = $api.byId('price').innerHTML - discountItem.money;
            if (total == 0 || total < 0) {
                console.log("免费");
                $api.byId('price').innerHTML = "0"
                total = 0;
                Discount_price = discountItem.money;
            } else {
                console.log("减");
                total = total;
                $api.byId('price').innerHTML = total
            }
        }
    }

    //服务类型按钮切换
    function checkType(ser_type, ser_price) {
        if (!/\./.test(ser_price)) {
            //为整数字符串在末尾添加.00
            ser_price += '.00';
        } else if (/^\./.test(ser_price)) {
            //字符以.开头时,在开头添加0
            ser_price += '00'; //在字符串末尾补零
            ser_price = ser_price.match(/\d+\.\d{2}/)[0];
        }
        var btn = document.getElementsByClassName("out");
        for (var i = 0; i < btn.length; i++) {
            if (i == ser_type) {
                btn[ser_type].style.background = "#0A5AFA";
                projectId = btn[ser_type].getAttribute("id")
                console.log(projectId);
                // 获取优惠券
                // My_discount(projectId);
            } else {
                // console.log(i);
                btn[i].style.background = "#C9C9C9";
            }
        }
        $api.byId('price').innerHTML = ser_price.toString();

    }



    // 车牌
    var data_list = {
        car_list: ["桂", "京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣", "鄂", "甘", "晋", "蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏", "川", "宁", "琼"]
    };
    //车牌模版
    var car_html = template('license', data_list);
    document.getElementById('license_content').innerHTML = car_html;


    function homepage_2() {
        api.openFrame({
            name: 'homepage_2',
            url: '../html/homepage_2.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    }

    function VehicleList() {
        api.openWin({
            name: 'VehicleList',
            url: '../html/VehicleList.html'
        });
    }

    /*选择车型小按钮*/
    function checkCar(index_) {
        var btn = document.getElementsByClassName("carBtn");
        var imglist = document.getElementsByClassName("carbtn-img");
        for (var i = 0; i < btn.length; i++) {
            if (i == index_) {
                imglist[index_].setAttribute("src", '../image/icon/GX1@2x.png');
                console.log(i);
                var k;
                k = (i == 0) ? "1" : "2";
                fnServiceBtn(k, api.pageParam.pid)
            } else {
                imglist[i].setAttribute("src", '../image/icon/WGX1@2x.png');
            }
        }
    }
    /*服务方式选择状态*/
    var conZhi = document.getElementById('conZhi');
    var conZi = document.getElementById('conZi');
    var conYu = document.getElementById('conYu');
    var muiselect = document.getElementById("mui-select");
    muiselect.onchange = function(e) {
        var blockdiv = document.getElementsByClassName("con");
        for (var i = 0; blockdiv.length > i; i++) {
            blockdiv[i].style.display = 'none';
        }
        //option 下标
        var index = this.selectedIndex
        console.log(index);
        if (index == 0) {
            service_Type = "key";
            conZhi.style.display = "block";
        } else if (index == 1) {
            Shop();
            service_Type = "shops";
            conZi.style.display = "block";
        } else if (index == 2) {
        }
        console.log(service_Type);
    }

    // 获取服务id
    function get_serverId() {
        var cabinet = document.getElementsByClassName("con-left")[0];
        area = cabinet.getAttribute("id");
        console.log(area);
    }

    // 点击钥匙柜进入钥匙柜列表或者门店列表
    function tokey_list(type) {
        if (type == undefined) {
            // 打开门店
            api.openWin({
                name: 'New_order-details',
                url: '../html/New_order-details.html',
                pageParam: {
                    type_list: 'shops'
                }
            });

        } else if (type) {
            // 钥匙柜
            api.openWin({
                name: 'New_order-details',
                url: '../html/New_order-details.html',
                pageParam: {
                    type_list: 'key'
                }
            });
        }
    }
    // 支付  1.支付方式,2订单号ID
    function Pay_ali(PayWay, PayOrder) {
        BASE.MYajax({
            'pathName': 'order/payment', //请求路径
            'methods': 'post',
            'ajaxData': {
                values: {
                    orders_id: PayOrder,
                    pay_type: PayWay
                }
            },
            'method': payBackData //调用函数
        });
    }

    function payBackData(ret, err) {
        if (ret.code == 200) {
            console.log(JSON.stringify(ret));
            if (ret.data == true) {
                api.openWin({
                    name: 'order-details',
                    url: '../html/order-details.html',
                    slidBackEnabled: false,
                    pageParam: {
                        //  订单号Id,订单号,下单时间,服务项目,优惠额度
                        Orderid: Ser_orderId,
                        order_number: Ser_order_sn,
                        created_time: Ser_updated_at,
                        server_way: Ser_desc,
                        discount_price: Discount_price
                    }
                });
            }
        } else {
            reToast(ret, err)
        }
    }


    //用户提交订单申请
    function placeOrder() {
        // 获取门店或者钥匙柜id
        get_serverId()
            // 获取车牌号
        var index = $api.byId('license_content').selectedIndex;
        var value = $api.byId('license_content').options[index].value;
        var carNumber = $api.byId("car_Number").value;
        var park_place=$api.byId("parkPlace").value;
        console.log(park_place);
        console.log(value);
        BASE.MYajax({
            'pathName': 'order/add', //请求路径
            'methods': 'post',
            'ajaxData': {
                values: {
                    // 1车牌号2车型ID3服务项目id,4下单方式id,5门店钥匙柜id,6优惠券id
                    car_number: value + carNumber.toUpperCase(),
                    type_id: typeId,
                    project_id: projectId,
                    service_type: service_Type,
                    area_id: area,
                    coupon_id: couponId,
                    parking_space:park_place
                }
            },
            'method': letData //调用函数
        });
    }
    function letData(ret, err) {
        if (ret.code == 200) {
            api.toast({
                msg: ret.message,
                duration: 2000,
                location: 'bottom'
            });
            var DiscountNumber = $api.byId("Discount_number").innerHTML;
            var Price = $api.byId('price').innerHTML;
            console.log("成功");
            console.log(JSON.stringify(ret));
            // 订单号ID,订单号,下单时间,服务项目,
            Ser_orderId = ret.data.id;
            Ser_order_sn = ret.data.order_sn;
            Ser_updated_at = ret.data.updated_at;
            Ser_desc = ret.data.desc;
            console.log(service_Type);
            // 免费洗车
            if ($api.byId('price').innerHTML == 0 || $api.byId('price').innerHTML < 0) {
                // 支付  1.支付方式,2订单号ID
                Pay_ali("alipay", ret.data.id);
            } else {
              console.log("优惠");
                api.openWin({
                    name: 'online-payment_2',
                    url: '../html/online-payment_2.html',
                    pageParam: {
                        // 1单号,2下单时间,3单号ID,4支付金额,5到店下单或者钥匙柜下单6优惠券id,7服务项目
                        order_num: ret.data.order_sn,
                        created_order: ret.data.created_at,
                        OrderId: ret.data.id,
                        Service_price: ret.data.pay_amount,
                        ser_way: service_Type,
                        coupon_id: couponId,
                        project: ret.data.desc
                    }
                })
            }
        } else {
            reToast(ret, err)
        }
    }

    //正在开发中
    function Being(){
    	api.toast({
				msg: '敬请期待~',
				duration: 2000,
				location: 'bottom'
			});
    }
</script>

</html>
